<template>
	<view class="top-container">
		<view class="welcome">
			<view class="welcome-left">
				<view class="greeting">
					Good Evening!
				</view>
				<view class="welcome-text">
					<view>嗨，今天是xxxx和你</view>
					<view>一起进步的第x天~</view>

				</view>
			</view>

			<!-- 单击切换首页形态 -->
			<view class="welcome-right" @click="$emit('changeUIMode')">
				<wd-icon name="user-talk" size="22px" color="#fff"></wd-icon>
			</view>

		</view>
		<!-- <image src="@/static/数字人.png" mode="aspectFit" class="taffy"></image> -->
		<image src="@/static/359166DA9B342BBE7EFFE85FCCF76F43.gif" mode="aspectFit" class="taffy"></image>
		<view class="entries dark-purple-card">
			<navigator url="/pages/HomePage/TargetPage" hover-class="navigator-hover">
				<view class="entry-item">
					<wd-icon name="discount-filled" size="40px" color="ffffff"></wd-icon>
					<view>学习目标</view>
				</view>
			</navigator>
			<navigator url="/pages/HomePage/AIStudyPage" hover-class="navigator-hover">
				<view class="entry-item">
					<wd-icon name="queue" size="40px" color="ffffff"></wd-icon>
					<view>智能巩固</view>
				</view>
			</navigator>
			<!-- <navigator url="/pages/HomePage/MyOverviewPage" hover-class="navigator-hover">
				<view class="entry-item">
					<wd-icon name="calendar" size="40px" color="#fff"></wd-icon>
					<view>我的概览</view>
				</view>
			</navigator> -->
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

</script>

<style>
    .top-container{
		display: flex;
		flex-direction: column;
	}
	.welcome{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.greeting{
		font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif;
		font-size: 21px;
		color: #fff;
		font-weight: bold;
	}
	.welcome-left{
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.welcome-text view{
		font-size: 12px;
		color: #aeaeae;
		line-height: 1.5;
	}
	.welcome-right{
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.taffy{
		width: 120px; 
		margin-right: 30px; 
		margin-top: -75px; 
		height: 150px;
		align-self: flex-end;
	}
	.entries{
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		margin-top: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
		border-radius: 15px;
	}

	.entry-item{
		/* background-color: #5e5e5e; */
		width: 140px;
		height: 80px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>